// hotel-management-frontend/src/client/Profile.js

import React, { useState } from 'react';
import { Card, Form, Input, Button, Descriptions, message } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { clientAPI } from '../services/api'; // Correct: Named import

const GuestProfile = () => {
    const [form] = Form.useForm();
    const [guestInfo, setGuestInfo] = useState(null);
    const [loading, setLoading] = useState(false);

    const onSearch = async (values) => {
        setLoading(true);
        try {
            // Correct API call: Call the specific function on clientAPI
            const response = await clientAPI.getGuestByCard(values.idCard);

            if (response.data) { // Assuming getGuestByCard returns a single object directly
                setGuestInfo(response.data);
            } else {
                message.warning('未找到该身份证号的客户信息');
                setGuestInfo(null);
            }
        } catch (error) {
            console.error('查询客户信息失败:', error);
            message.error(error.response?.data?.error || '查询失败，请检查身份证号或网络连接');
            setGuestInfo(null);
        } finally {
            setLoading(false);
        }
    };

    return (
        <Card
            title="我的信息"
            style={{ maxWidth: 800, margin: '0 auto' }}
            headStyle={{ backgroundColor: '#f0f2f5', fontWeight: 'bold' }}
        >
            <Form
                form={form}
                layout="inline"
                onFinish={onSearch}
                style={{ marginBottom: 24 }}
            >
                <Form.Item
                    name="idCard"
                    label="身份证号"
                    rules={[
                        { required: true, message: '请输入身份证号' },
                        { len: 18, message: '身份证号应为18位' }
                    ]}
                >
                    <Input
                        placeholder="请输入身份证号"
                        prefix={<UserOutlined />}
                        style={{ width: 300 }}
                    />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" loading={loading}>
                        查询
                    </Button>
                </Form.Item>
            </Form>

            {guestInfo ? (
                <Descriptions bordered column={1}>
                    <Descriptions.Item label="姓名">{guestInfo.name}</Descriptions.Item>
                    <Descriptions.Item label="性别">{guestInfo.gender}</Descriptions.Item>
                    <Descriptions.Item label="身份证号">{guestInfo.id_card}</Descriptions.Item>
                    <Descriptions.Item label="联系电话">{guestInfo.phone || '未登记'}</Descriptions.Item>
                </Descriptions>
            ) : (
                <div style={{ textAlign: 'center', color: '#888' }}>
                    请输入身份证号进行查询
                </div>
            )}
        </Card>
    );
};

export default GuestProfile;